import React, {Component} from 'react';
import 'braft-editor/dist/index.css'
import BraftEditor from 'braft-editor'
import {ContentUtils} from 'braft-utils'
import {ImageUtils} from 'braft-finder'
import {Upload, Icon, message} from 'antd'
import PropTypes from "prop-types";

import {BaseUrl} from "../../api/config";
import {reqImgDelete} from "../../api";

class Editor extends Component {
    constructor(props) {
        super(props);

        this.state = {
            editorState: BraftEditor.createEditorState(this.props.detail),
            outputHTML: "",
            showOutputHTML: true
        }
    }

    handleEditorChange = editorState => {
        this.setState({
            editorState,
            outputHTML: editorState.toHTML()
        })
    };

    handleUploadChange = async ({file, fileList, event}) => {
        const {status} = file;

        // 这里有很多的很奇怪的bug
        // 视频中能够修改 file.name 但是我这里是无法修改的。
        switch (status) {
            case 'done':
                // console.log('done', file);
                // console.log(fileList);
                const {response} = file;
                if (response.status * 1 !== 0) {
                    message.error('上传图片失败');
                    break;
                }
                // 一旦上传成功，将当前上传的file信息修正。实际上这个修改没用。
                message.success('上传图片成功');
                const {url} = response.data;

                // 这里是富文本中的预览
                this.setState({
                    editorState: ContentUtils.insertMedias(this.state.editorState, [{
                        type: 'IMAGE',
                        url
                    }])
                });

                break;
            case 'removed':
                // 这里的删除是删除本地的，还需要删除服务器的。
                // 如果上传完成之后，立刻删除照片，那么当前照片的名字是读取不到上面修改后的名字的。
                // 如果重新进入当前界面，file.name 是能读取到服务器中的照片名字的。
                // 如果没有response，那么是重新进入当前界面
                // 如果有response，表示是上传完成，没有退出界面。
                // console.log('removed images ', file);
                let fileName = file.response ? file.response.data.name : file.name;
                const result = await reqImgDelete(fileName);
                // console.log(fileName, result);
                if (result.status * 1 === 200 && result.data.status * 1 === 0) {
                    message.success('删除图片成功');
                    break;
                }
                message.error('删除图片失败');
                break;
            default:
                break;
        }

        this.setState({fileList})
    };

    /**
     * 获取带标签的信息
     */
    getDetail = () => (this.state.editorState.toHTML());

    /**
     * 获取不带标签的信息
     * */
    getText = () => (this.state.editorState.toText());

    render() {
        const controls = ['middle', 'bold', 'italic', 'underline', 'text-color', 'separator', 'link', 'separator'];
        const extendControls = [
            {
                key: 'antd-uploader',
                type: 'component',
                component: (
                    <Upload
                        action={BaseUrl + "/manage/img/upload"}
                        accept="image/*" // 表示接收任意类型的图片
                        name='image' // 发送到后台的请求参数名
                        listType="picture"
                        showUploadList={false}
                        onChange={this.handleUploadChange}
                    >
                        {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
                        <button type="button" className="control-item button upload-button" data-title="插入图片">
                            <Icon type="picture" theme="filled"/>
                        </button>
                    </Upload>
                )
            }
        ];
        // const {outputHTML} = this.state;

        return (
            <div>
                <BraftEditor
                    value={this.state.editorState}
                    onChange={this.handleEditorChange}
                    controls={controls}
                    placeholder="请输入正文内容"
                    extendControls={extendControls}
                    style={{border: '1px solid #D9D9D9', minHeight: 200, borderRadius: 5}}
                />
                {/* <h5 hidden>输出内容</h5>
                <div className="output-content">{outputHTML}</div> */}
            </div>
        );
    }
}

Editor.propTypes = {detail: PropTypes.string};

export default Editor;